<template>
	<view>
		<view class="item" style="padding: 20rpx;">

			<u-form ref="uform" label-width="auto">

				<view style="display: flex;justify-content: space-between;margin: 0 20rpx;">
					<u-icon name="order" color="#1573FF" label="查询者驾驶证" label-color="#333333"></u-icon>
					<text
						style="background-color: #1573FF;border-radius: 8rpx;padding: 5rpx 15rpx;color: #fff;font-size: 24rpx;"
						@click="goRecord">查询记录</text>
				</view>
				<view style="display: flex;flex-direction: column;align-items: center;margin: 20rpx 0;">
					<view class="uploadBg">
						<lr-upload width="320rpx" height="200rpx" uploadType="2"
							addBtnImage="../../static/car/addCar_driverCard.png" @on-change="uploadOnChange">
						</lr-upload>
					</view>

					<text style="font-size: 24rpx;color: #333;">驾驶证正页</text>
				</view>

				<u-form-item label="姓名" borderBottom required>
					<u-input v-model="addbean.name" inputAlign="right" border="none" disabled disabledColor="#fff"
						placeholder="拍摄证件后可自动识别">
					</u-input>
				</u-form-item>
				<u-form-item label="身份证号" borderBottom required>
					<u-input v-model="addbean.drivingNo" inputAlign="right" border="none" disabled disabledColor="#fff"
						placeholder="拍摄证件后可自动识别">
					</u-input>
				</u-form-item>

				<view class="bottom">
					<text @click="commit">查 询</text>

				</view>
			</u-form>
		</view>

	</view>
</template>

<script>
	import lrUpload from '@/components/global/lr-upload.vue'

	export default {
		components: {
			lrUpload,
		},
		data() {
			return {
				addbean:{
					name: '',
					drivingNo: '',
				}
				
				
			}
		},
		methods: {
			commit() {
				if (uni.$u.test.isEmpty(this.addbean.name)) {
					this.$u.toast('请上传正确的驾驶证正页')
					return
				}

				this.$u.api.getDrivingLicenceQuery(this.addbean).then(res => {

					uni.navigateTo({
						url: '/pagesA/querydrivecard/query-result'+uni.$u.queryParams(res)
					})
				})
			},

			goRecord() {
				uni.navigateTo({
					url: '/pagesA/querydrivecard/drivecard-record'
				})
			},

			//图片上传成功回调
			uploadOnChange(tag, resultList, resultObjList) {
				//驾驶证
				//调用自动识别接口
				this.getDriverCerInfo(resultList[0]);
			},

			//自动获取驾驶证信息
			getDriverCerInfo(imageUrl) {
				this.$u.api.getOcrDriverCard({
					url: imageUrl
				}).then(res => {
					this.addbean.name = res.name;
					this.addbean.drivingNo = res.driverNo;
					this.addbean.expirationDate = res.firstTime+'/'+res.endTime;
					this.addbean.firstTime = res.firstTime;
					this.addbean.driverLicenseType = res.carType;
					
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.bottom {
		width: 100%;
		height: 100rpx;
		background-color: white;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 80rpx;

		text {
			width: 98%;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 50rpx;
			background-color: $blue15;
			color: white;
			text-align: center;
			font-size: 30rpx;
		}
	}
</style>
